<template>
  <div class="app-container">
    <div ref="drawDom">
      <nav-bar />
      <div class="home-container">
        <div class="left">
          <div class="chart-item">
            <box-container :box-title="'肉桂生产宏观数据'">
              <productionStatistics />
            </box-container>
          </div>
          <div class="chart-item">
            <box-container :box-title="'肉桂价格变化趋势'">
              <priceTrend />
            </box-container>
          </div>
          <div class="chart-item">
            <box-container :box-title="'肉桂生产地区对比'">
              <cityProductionPie />
            </box-container>
          </div>
        </div>
        <div class="center">
          <div class="chart-item">
            <mapChart />
          </div>
          <div class="chart-item">
            <box-container :box-title="'肉桂市场价格'">
              <marketPriceTable />
            </box-container>
          </div>
          <div class="chart-item">
            <box-container :box-title="'肉桂产地价格'">
              <productPriceTable />
            </box-container>
          </div>
        </div>
        <div class="right">
          <div class="chart-item"
               style="height:55vh">
            <box-container :box-title="'肉桂企业产销排行'">
              <companyProductSaleBar />
            </box-container>
          </div>
          <div class="chart-item">
            <box-container :box-title="'肉桂舆情热词'">
              <wordCloud />
            </box-container>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from './components/navBar.vue'
import boxContainer from './components/boxContainer/index.vue'
import productionStatistics from './components/productionStatistics.vue'
import priceTrend from './components/priceTrend.vue'
import productPriceTable from './components/productPriceTable.vue'
import marketPriceTable from './components/marketPriceTable.vue'
import wordCloud from './components/wordCloud.vue'
import mapChart from "./components/map.vue"
import cityProductionPie from './components/cityProductionPie.vue'
import companyProductSaleBar from './components/companyProductSaleBar.vue'
export default {
  components: { navBar, boxContainer, productionStatistics, priceTrend, productPriceTable, marketPriceTable, wordCloud, mapChart, companyProductSaleBar, cityProductionPie }
}
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  color: black;
  background: url("./img/bg.jpg") no-repeat center center;
  background-blend-mode: lighten;
  background-size: cover;
  background-position: center;
}

.home-container {
  display: flex;

  .chart-item {
    margin-top: 5vh;
  }

  .left {
    margin-left: 1vw;
    width: 27vw;
    margin-right: 1vw;
    .chart-item {
      height: 25vh;
    }
  }

  .center {
    width: 40vw;
    margin-right: 1vw;
    .chart-item {
      height: 25vh;
    }
  }
  .right {
    width: 27vw;
    .chart-item {
      height: 25vh;
    }
  }
}
</style>
